<template>
  <div class="topic">
    <div class="home_title">专题精选</div>
    <van-swipe :loop="false" :width="300">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.scene_pic_url" width="100%" height="200" alt />
        <div>
          <h4>{{item.title}}</h4>
          <span>{{item.price_info | filterMoney}}起</span>
        </div>
        <p class="van-ellipsis">{{item.subtitle}}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
 
<script>
export default {
  props: ["topicList"],
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  background: #fff;
  margin-top: 20px;
  .van-swipe {
    margin-right: 4px;
  }
  .van-swipe-item {
    padding: 4px 4px;
    div {
      width: 100%;
      /* overflow: hidden;对于一个带有宽度的盒子而言，可以自动检测高度 */
      overflow: hidden;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      h4 {
        float: left;
      }
      span {
        float: left;
        color: darkred;
        font-size: 15px;
      }
    }
    p {
      color: #666;
      width: 90%;
    }
  }
  /deep/.van-swipe__indicators {
    display: none;
  }
}
</style>